<template>
	<view class="agent_box">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding">
			<view v-if="list !== undefined && list!== null && list.length > 0">
				<view class="agent_top">
					<u-checkbox-group v-model="Arr" iconPlacement="right" placement="column" @change="checkboxChange"
						v-if="list !== undefined && list!== null && list.length>0">
						<view class="agent_list" v-for="(item,index) in list" :key="index" @click="select(index)">
							<u-checkbox activeColor="#1296db" :label="item.name" :name="item.id"
								class="check"></u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
				<view class="button" @click="subBtn">确认代理</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				list: [],
				current: null,
				Arr: []
			}
		},
		onLoad() {
			this._request()
		},
		methods: {
			select(index) {
				this.current = index
			},
			async _request() {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Team/getTopAgencyProduct',
					header: {
						'token': userinfo.token
					},
				});
				this.loadding = false
				if (res.code == 1) {
					this.list = res.data
				} else {}
			},
			checkboxChange(e) {
				this.Arr = e
			},
			async subBtn() {
				var that = this
				if (this.Arr.length <= 0) {
					uni.showToast({
						title: '请选择要代理的产品!',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showModal({
						title: '提交',
						content: '确定要代理选中的产品吗？',
						success: function(res) {
							if (res.confirm) {
								that.saveAgencyProduct()
							}
						}
					});
				}
			},
			async saveAgencyProduct() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Team/saveAgencyProduct',
					data: {
						product_id: this.Arr
					},
					header: {
						'token': userinfo.token
					},
				});
				let _this = this
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
						success() {
							this.timer = setTimeout(() => {
								uni.navigateBack({});
							}, 2000)
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agent_box {
		padding: 20rpx;
		box-sizing: border-box;

		.agent_top {
			height: 75vh;

			.agent_list {
				padding: 40rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #eee;
				transition: all 0.3s;
			}

			.chosen {
				padding: 20rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #1296db;
				color: #1296db;
			}
		}

		.button {
			position: fixed;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%, -50%);
			background-color: #018afe;
			width: 95%;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 20rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			transition: all 0.5s;

		}

		.button:active {
			opacity: 0.8;
		}
	}
</style>